<template>
  <div class="article">
    <div class="head"></div>
    <van-nav-bar
      title="心理杂志"
      left-arrow
      @click-left="onClickLeft"
      :border="false"
    />
    <van-tabs color="#119df2">
      <van-tab v-for="(item, i) in titlearr" :title="item" :key="i">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <ul class="list">
              <li
                class="item"
                v-for="item in state.listarr[i]"
                :title="item"
                :key="item._id"
              >
                <img :src="item.img" alt="" class="left-img" />
                <div class="right-title">
                  <h3 class="title">{{ item.title }}</h3>
                  <div class="logo">
                    <img
                      class="saw"
                      src="../../assets/img/article/icon02.png"
                    /><i class="num">{{ item.saw }}</i>
                    <img
                      class="click"
                      src="../../assets/img/article/icon03.png"
                    /><i class="num">{{ item.click }}</i>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { getArticleData } from "../../utils/api";
export default {
  setup() {
    const router = useRouter();
    const titlearr = ["全部", "情感", "亲子", "职场", "健康", "科普"];
    const onClickLeft = () => {
      router.go(-1);
    };
    let loading = false;
    let finished = false;
    let refreshing = false;
    const state = reactive({
      listarr: [],
      listarr1: [],
      listarr2: [],
      listarr3: [],
      listarr4: [],
      listarr5: [],
      listarr6: [],
    });
    onMounted(async () => {
      const res = await getArticleData();
      state.listarr1 = res.data.result;
      state.listarr2 = res.data.result.slice(2, 15);
      state.listarr3 = res.data.result.slice(6, 20);
      state.listarr4 = res.data.result.slice(5, 18);
      state.listarr5 = res.data.result.slice(7, 20);
      state.listarr6 = res.data.result.slice(8, 20);
      state.listarr = [
        state.listarr1,
        state.listarr2,
        state.listarr3,
        state.listarr4,
        state.listarr5,
        state.listarr6,
      ];
      // console.log(state.listarr1);
    });
    return {
      onClickLeft,
      titlearr,
      state,
      loading,
      finished,
      refreshing,
    };
  },
};
</script>
<style lang="less">
:root {
  --van-nav-bar-icon-color: #119df2;
  --van-nav-bar-arrow-size: 22px;
  --van-tab-font-size: 13px;
  --van-tab-text-color: #656565;
  --van-tab-active-text-color: #3c95e9;
}
.article {
  font-family: PingFang SC;
  .van-icon-arrow-left {
    font-weight: bolder;
    width: 19px;
    height: 30px;
    margin-top: 21px;
  }
  .van-nav-bar__title {
    margin-top: 12px;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
  }
  .van-tab--active {
    border-color: #3c95e9;
  }
  .van-tab__text {
    font-weight: bolder;
  }
  .list {
    border-top: 1px solid #f2f2f2;
    .item {
      padding: 13px 0;
      display: flex;
      border-bottom: 1px solid #f2f2f2;
      .left-img {
        width: 87px;
        height: 69px;
        margin-left: 7.5px;
        margin-right: 3px;
      }
      .right-title {
        position: relative;
        .title {
          margin-right: 13px;
          font-size: 14px;
          font-weight: bold;
          color: #000000;
          line-height: 18px;
        }
        .logo {
          position: absolute;
          bottom: 3px;
          left: 0;
          .saw,
          .click {
            height: 15px;
            width: 15px;
            vertical-align: bottom;
          }
          .num {
            margin-right: 17px;
            color: #8d8d8d;
          }
        }
      }
    }
  }
}
</style>
